<template>
	<view class="index-container">
		<!-- 自定义导航栏 -->
		<custom-navbar title="首页" :show-back="false">
			<template #right>
				<uni-icons type="search" size="20" color="#333" @click="handleSearch"></uni-icons>
			</template>
		</custom-navbar>

		<!-- 页面内容 -->
		<view class="page-content">
			<!-- 顶部轮播图 -->
		<view class="banner-section">
			<swiper class="banner-swiper" :indicator-dots="true" indicator-active-color="#007AFF"
					circular :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image class="banner-image" :src="item.image" mode="aspectFill" @click="goToBanner(item)"></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 通知栏 -->
		<view class="notice-section" v-if="noticeList.length">
			<view class="notice-content">
				<uni-icons type="sound-filled" color="#FF9500" size="20"></uni-icons>
				<swiper class="notice-swiper" vertical :autoplay="true" :interval="3000" :duration="500">
					<swiper-item v-for="(notice, index) in noticeList" :key="index">
						<text class="notice-text" @click="goToNotice(notice)">{{ notice.title }}</text>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-title">功能菜单</view>
			<view class="menu-grid">
				<view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="goToMenu(item)">
					<view class="menu-icon">
						<uni-icons :type="item.icon" size="30" :color="item.color || '#007AFF'"></uni-icons>
					</view>
					<text class="menu-text">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 内容列表 -->
		<view class="content-section">
			<view class="content-header">
				<view class="content-title">最新内容</view>
				<text class="more-btn" @click="goToMore">更多</text>
			</view>
			<view class="content-list">
				<view class="content-item" v-for="(item, index) in contentList" :key="index" @click="goToDetail(item)">
					<view class="item-content">
						<text class="item-title">{{ item.title }}</text>
						<text class="item-desc">{{ item.description }}</text>
						<text class="item-time">{{ item.createTime }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
import { getDataList } from "../../api/rs"

export default {
	name: 'IndexPage',
	data() {
		return {
			// 轮播图数据
			bannerList: [
				{
					id: 1,
					image: '/static/images/banner1.jpg',
					title: '轮播图1',
					url: ''
				},
				{
					id: 2,
					image: '/static/images/banner2.jpg',
					title: '轮播图2',
					url: ''
				}
			],
			// 通知数据
			noticeList: [
				{
					id: 1,
					title: '这是一条示例通知信息'
				},
				{
					id: 2,
					title: '欢迎使用uni-app开发模板'
				}
			],
			// 功能菜单数据
			menuList: [
				{
					id: 1,
					name: '示例列表',
					icon: 'list',
					color: '#007AFF',
					url: '/subPages/example/list'
				},
				{
					id: 2,
					name: '网页浏览',
					icon: 'paperplane',
					color: '#4CD964',
					url: '/subPages/webview/webview'
				},
				{
					id: 3,
					name: '系统设置',
					icon: 'gear',
					color: '#FF9500',
					url: '/subPages/setting/setting'
				},
				{
					id: 4,
					name: '更多功能',
					icon: 'more',
					color: '#FF3B30',
					url: ''
				}
			],
			// 内容列表数据
			contentList: []
		};
	},
	methods: {
		// 轮播图点击事件
		goToBanner(item) {
			if (item.url) {
				this.goPage('/subPages/webview/webview?url=' + encodeURIComponent(item.url) + '&title=' + encodeURIComponent(item.title));
			}
		},

		// 通知点击事件
		goToNotice(notice) {
			uni.showToast({
				title: '点击了通知: ' + notice.title,
				icon: 'none'
			});
		},

		// 菜单点击事件
		goToMenu(item) {
			if (item.url) {
				this.goPage(item.url);
			} else {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
			}
		},

		// 内容详情点击事件
		goToDetail(item) {
			this.goPage('/pages/demo/demo?id=' + item.id);
		},

		// 更多按钮点击事件
		goToMore() {
			this.goPage('/pages/demo/demo');
		},

		// 获取内容列表
		async getContentList() {
			try {
				// 这里可以调用实际的API
				// const res = await getDataList({ page: 1, pageSize: 10 });
				// this.contentList = res.records || [];

				// 模拟数据
				this.contentList = [
					{
						id: 1,
						title: '示例内容标题1',
						description: '这是示例内容的描述信息',
						createTime: '2024-01-01'
					},
					{
						id: 2,
						title: '示例内容标题2',
						description: '这是另一个示例内容的描述信息',
						createTime: '2024-01-02'
					}
				];
			} catch (error) {
				console.error('获取内容列表失败:', error);
			}
		},

		// 搜索功能
		handleSearch() {
			uni.showToast({
				title: '搜索功能',
				icon: 'none'
			});
			// 这里可以跳转到搜索页面
			// this.goPage('/subPages/search/search');
		}
	},

	onLoad() {
		this.getContentList();
	}
};
</script>

<style lang="scss" scoped>
.index-container {
	background-color: #f6f9ff;
	min-height: 100vh;

	.page-content {
		padding-top: 88rpx; // 为自定义导航栏留出空间
	}
}

// 轮播图样式
.banner-section {
	margin: 20rpx;
	border-radius: 12rpx;
	overflow: hidden;

	.banner-swiper {
		height: 300rpx;

		.banner-image {
			width: 100%;
			height: 100%;
		}
	}
}

// 通知栏样式
.notice-section {
	margin: 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;

	.notice-content {
		display: flex;
		align-items: center;

		.notice-swiper {
			flex: 1;
			height: 40rpx;
			margin-left: 20rpx;

			.notice-text {
				font-size: 28rpx;
				color: #333;
				line-height: 40rpx;
			}
		}
	}
}

// 功能菜单样式
.menu-section {
	margin: 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;

	.menu-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.menu-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;

		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.menu-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.menu-text {
				font-size: 24rpx;
				color: #666;
				text-align: center;
			}
		}
	}
}

// 内容列表样式
.content-section {
	margin: 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;

	.content-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.content-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.more-btn {
			font-size: 28rpx;
			color: #007AFF;
		}
	}

	.content-list {
		.content-item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;

			&:last-child {
				border-bottom: none;
			}

			.item-content {
				.item-title {
					display: block;
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 10rpx;
				}

				.item-desc {
					display: block;
					font-size: 26rpx;
					color: #666;
					margin-bottom: 10rpx;
				}

				.item-time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
}
</style>